/*
 * @Description: 二维码生成封装 3.0.2
 * @Autor: lcz
 * @Date: 2022-06-15 19:36:20
 * @LastEditors: lcz
 * @LastEditTime: 2022-06-16 10:19:43
 */
import { CSSProperties } from 'react'
import { QRCodeCanvas, QRCodeSVG } from 'qrcode.react'

//网格数量
export type CodeLevelEnum = 'L' | 'M' | 'Q' | 'H'

//生成类型
export type CodeTypeEnum = 'Canvas' | 'Svg'

//背景色
export type bgColorEnum = '#ffffff' | ''

//填充色
export type fgColorEnum = '#000000' | ''

export interface CodeProps {
  tabIndex?: number
  class?: string
  style?: CSSProperties
  size: number
  value: string
  bgColor: bgColorEnum
  fgColor: fgColorEnum
  level: CodeLevelEnum
  type: CodeTypeEnum
  src?: string
  srcWidth?: number
  srcHeight?: number
}

const CreateCode = (props: CodeProps) => {
  return (
    <div className={props.class} tabIndex={props.tabIndex} style={props.style}>
      {props.type === 'Canvas' ? (
        <QRCodeCanvas
          value={props.value}
          size={props.size}
          bgColor={props.bgColor}
          fgColor={props.fgColor}
          level={props.level}
          imageSettings={{
            src: props.src || '',
            width: props.srcWidth || 0,
            height: props.srcHeight || 0,
            excavate: true,
          }}
        />
      ) : (
        <QRCodeSVG
          value={props.value}
          size={props.size}
          bgColor={props.bgColor}
          fgColor={props.fgColor}
          level={props.level}
          imageSettings={{
            src: props.src || '',
            width: props.srcWidth || 0,
            height: props.srcHeight || 0,
            excavate: true,
          }}
        />
      )}
    </div>
  )
}

export default CreateCode
